<template>
  <div class="remark-manage">
    <div class="header">调度引擎</div>
    <div class="content-body">
      <iframe
        ref="iframeRef"
        :src="iframeUrl"
        width="100%"
        height="100%"
        class="interface-iframe"
      ></iframe>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import ServiceNumChart from '@/components/app-echart/service-num-chart.vue'
import ServiceStateChart from '@/components/app-echart/service-state-chart.vue'
import { getLogList, getlogStatistics } from '@/services/modules/external-service'
const currentPage = ref(1)
const iframeUrl = 'http://111.198.29.34:18504/shandong_api/doc.html'
// const dataList = [
//   {
//     applyUse: '获取当前模型通讯健康状况',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:eyJdfdsdhbGciOiJSUzI1NiIsInR5',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取数据类型列表',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:edsadsayJhbGciOiJSUzI1NiIsInR5',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取模型类型列表',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取流域信息',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:3231GciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取基面信息',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:eyJdsadhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取模型要素列表',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key: eyaaddJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取设计降雨信息',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:dsadaseyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   },
//   {
//     applyUse: '获取预制输出项列表',
//     buildPerson: 'GET',
//     buildTime: '新安江',
//     use: '联合调度四预报系统 ',
//     keybook: 'key:fdfyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9',
//     updateTime: '2022/12/8'
//   }
// ]
// 接口类型
const apiTypeData = reactive([
  { name: 'POST', apiType: 1 },
  { name: 'GET', apiType: 2 }
])
const formData = reactive({
  pageNum: 1,
  pageSize: 10,
  apiName: '',
  apiUser: '',
  apiType: '',
  startDate: '',
  endDate: ''
})
let page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页条目数
  total: 0 // 记录总数
})
const dataList = ref([])
onMounted(() => {
  // acceptLogList()
  // 获取日期格式
  handleTimeData()
  // 获取统计图数据
  // acceptLogStatistics()
})
// 查询
function initData() {
  acceptLogList()
  acceptLogStatistics()
}
// 切换页码
function handleCurrentChange(val) {
  currentPage.value = val
  formData.pageNum = val
  acceptLogList()
}
function handleTimeData() {
  // 获取当前日期
  let currentDate = new Date()
  // 获取30天之前的日期
  let thirtyDaysAgo = new Date()
  thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
  // 将日期格式化为YYYY-MM-DD格式
  formData.endDate = currentDate.toISOString().slice(0, 10)
  formData.startDate = thirtyDaysAgo.toISOString().slice(0, 10)
  // 获取列表数据
  acceptLogList()
  // 获取统计图数据
  acceptLogStatistics()
}
// 获取列表
function acceptLogList() {
  getLogList(formData).then((res) => {
    if (res.code == 200) {
      dataList.value = res.data.list
      page.total = res.data.totalRow
    }
  })
}
const stateData = reactive({
  // 失败次数
  failNum: [],
  // 访问日期
  accessDate: [],
  // 成功次数
  successNum: [],
  // 访问次数
  accessNum: []
})
// 获取统计数据
function acceptLogStatistics() {
  stateData.failNum = []
  stateData.accessDate = []
  stateData.successNum = []
  stateData.accessNum = []
  getlogStatistics(formData).then((res) => {
    if (res.code == 200) {
      res.data.forEach((e) => {
        // 失败次数
        stateData.failNum.push(e['failNum'])
        // 访问日期
        stateData.accessDate.push(e['accessDate'])
        // 成功次数
        stateData.successNum.push(e['successNum'])
        // 访问次数
        stateData.accessNum.push(e['accessNum'])
      })
    }
  })
}
</script>
<style lang="less" scoped>
.remark-manage {
  height: 100%;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding-left: 20px;
    border-bottom: 1px solid var(--border-primary);
    font-size: var(--header-fontsize);
    font-weight: 700;
    box-sizing: border-box;
  }

  .content-body {
    height: calc(100% - 50px);
    padding: 10px;
    box-sizing: border-box;
    .interface-iframe {
      border: none;
      height: 100%;
      width: 100%;
    }
    .body-box {
      display: flex;
      flex-direction: column;
      height: 100%;
      border: 1px solid var(--border-primary);
      border-radius: 10px;
      box-sizing: border-box;

      .search {
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
      }

      .echarts {
        display: flex;
        height: 300px;

        .item {
          flex: 1;
        }
      }

      .table {
        flex: 1;
        overflow-y: auto;
      }

      .page {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
      }
    }
  }
}
</style>
